import _objectSpread from '@babel/runtime/helpers/esm/objectSpread2';
import _classCallCheck from '@babel/runtime/helpers/esm/classCallCheck';
import _createClass from '@babel/runtime/helpers/esm/createClass';
var ChatbotSDK = /*#__PURE__*/ (function() {
  function ChatbotSDK(config) {
    _classCallCheck(this, ChatbotSDK);
    this.iframe = null;
    this.container = null;
    this.chatIcon = null;
    this.isVisible = false;
    this.isDragging = false;
    this.isResizing = false;
    this.dragOffset = {
      x: 0,
      y: 0,
    };
    this.config = _objectSpread(
      {
        width: '350px',
        height: '600px',
        position: 'fixed',
        bottom: '20px',
        right: '20px',
        url: 'http://47.236.204.213:3002',
        iconSize: '56px',
        minWidth: '300px',
        minHeight: '400px',
        maxWidth: '800px',
        maxHeight: '800px',
      },
      config,
    );
  }
  return _createClass(ChatbotSDK, [
    {
      key: 'init',
      value: function init() {
        var _this = this;
        this.container = document.getElementById(this.config.containerId);
        if (!this.container) {
          throw new Error(
            'Container with id '.concat(this.config.containerId, ' not found'),
          );
        }

        // Create chat icon wrapper for pulse effect
        var iconWrapper = document.createElement('div');
        iconWrapper.style.position = 'fixed';
        iconWrapper.style.bottom = '20px';
        iconWrapper.style.right = '20px';
        iconWrapper.style.zIndex = '9999';

        // Create pulse effect element
        var pulse = document.createElement('div');
        pulse.style.position = 'absolute';
        pulse.style.width = '100%';
        pulse.style.height = '100%';
        pulse.style.borderRadius = '50%';
        pulse.style.backgroundColor = 'rgba(51, 51, 51, 0.2)';
        pulse.style.animation = 'pulse 2s infinite';

        // Add keyframes
        var style = document.createElement('style');
        style.textContent =
          "\n      @keyframes pulse {\n        0% { transform: scale(1); opacity: 0.5; }\n        70% { transform: scale(1.3); opacity: 0; }\n        100% { transform: scale(1.3); opacity: 0; }\n      }\n      @keyframes fadeIn {\n        0% { opacity: 0; transform: translateY(10px); }\n        100% { opacity: 1; transform: translateY(0); }\n      }\n      @keyframes slideIn {\n        0% { transform: translateY(20px); opacity: 0; }\n        100% { transform: translateY(0); opacity: 1; }\n      }\n      @keyframes rotateIn {\n        0% { transform: rotate(-180deg) scale(0.3); }\n        100% { transform: rotate(0) scale(1); }\n      }\n      .resize-handle {\n        position: absolute;\n        z-index: 9999;\n        opacity: 0;\n        transition: all 0.3s ease;\n      }\n      .chat-window-visible .resize-handle {\n        opacity: 1;\n      }\n      .resize-handle.right {\n        right: -4px;\n        top: 30px;\n        width: 8px;\n        height: calc(100% - 30px);\n        cursor: e-resize;\n      }\n      .resize-handle.right:after {\n        content: '';\n        position: absolute;\n        right: 3px;\n        top: 0;\n        height: 100%;\n        width: 2px;\n        background: transparent;\n        transition: background 0.2s;\n      }\n      .resize-handle.right:hover:after {\n        background: rgba(0, 0, 0, 0.2);\n      }\n      .resize-handle.bottom {\n        bottom: -4px;\n        left: 0;\n        height: 8px;\n        width: 100%;\n        cursor: s-resize;\n      }\n      .resize-handle.bottom:after {\n        content: '';\n        position: absolute;\n        bottom: 3px;\n        left: 0;\n        width: 100%;\n        height: 2px;\n        background: transparent;\n        transition: background 0.2s;\n      }\n      .resize-handle.bottom:hover:after {\n        background: rgba(0, 0, 0, 0.2);\n      }\n      .resize-handle.corner {\n        right: -4px;\n        bottom: -4px;\n        width: 12px;\n        height: 12px;\n        cursor: se-resize;\n      }\n      .resize-handle.corner:after {\n        content: '';\n        position: absolute;\n        right: 3px;\n        bottom: 3px;\n        width: 6px;\n        height: 6px;\n        border-right: 2px solid transparent;\n        border-bottom: 2px solid transparent;\n        transition: border-color 0.2s;\n      }\n      .resize-handle.corner:hover:after {\n        border-color: rgba(0, 0, 0, 0.2);\n      }\n      .chat-header {\n        position: absolute;\n        top: 0;\n        left: 0;\n        right: 0;\n        height: 30px;\n        background: #333;\n        border-top-left-radius: 16px;\n        border-top-right-radius: 16px;\n        cursor: move;\n        display: flex;\n        align-items: center;\n        padding: 0 15px;\n        color: white;\n        font-family: system-ui, -apple-system, sans-serif;\n        font-size: 14px;\n        user-select: none;\n        opacity: 0;\n        transform: translateY(-10px);\n        transition: all 0.3s ease;\n      }\n      .chat-window-visible .chat-header {\n        opacity: 1;\n        transform: translateY(0);\n      }\n      .chat-header:hover {\n        background: #444;\n      }\n      .chat-content {\n        position: relative;\n        width: 100%;\n        height: 100%;\n        border-radius: 16px;\n        overflow: hidden;\n        opacity: 0;\n        transform: translateY(10px);\n        transition: all 0.3s ease;\n      }\n      .chat-window-visible .chat-content {\n        background: white;\n        opacity: 1;\n        transform: translateY(0);\n      }\n      .chat-container {\n        background: transparent;\n        border-radius: 16px;\n        transform: translate3d(0,0,0);\n        will-change: transform;\n        transition: all 0.3s ease;\n        z-index: 1;\n      }\n      .chat-window-visible .chat-container {\n        background: white;\n        box-shadow: 0 8px 24px rgba(0,0,0,0.1);\n      }\n    ";
        document.head.appendChild(style);

        // Create chat icon
        this.chatIcon = document.createElement('div');
        this.chatIcon.style.width = this.config.iconSize;
        this.chatIcon.style.height = this.config.iconSize;
        this.chatIcon.style.borderRadius = '50%';
        this.chatIcon.style.backgroundColor = '#333333';
        this.chatIcon.style.cursor = 'pointer';
        this.chatIcon.style.position = 'relative';
        this.chatIcon.style.boxShadow = '0 4px 12px rgba(0,0,0,0.15)';
        this.chatIcon.style.transition =
          'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)';
        this.chatIcon.style.display = 'flex';
        this.chatIcon.style.alignItems = 'center';
        this.chatIcon.style.justifyContent = 'center';
        this.chatIcon.style.animation =
          'rotateIn 0.5s cubic-bezier(0.4, 0, 0.2, 1)';
        this.chatIcon.innerHTML =
          '\n      <svg width="50%" height="50%" viewBox="0 0 24 24" fill="white" style="transition: all 0.3s ease">\n        <path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12z"/>\n      </svg>\n    ';

        // Add hover effect
        this.chatIcon.onmouseover = function() {
          _this.chatIcon.style.backgroundColor = '#000000';
          _this.chatIcon.style.transform = 'scale(1.1) translateY(-2px)';
          _this.chatIcon.style.boxShadow = '0 6px 16px rgba(0,0,0,0.2)';
        };
        this.chatIcon.onmouseout = function() {
          _this.chatIcon.style.backgroundColor = '#333333';
          _this.chatIcon.style.transform = 'scale(1) translateY(0)';
          _this.chatIcon.style.boxShadow = '0 4px 12px rgba(0,0,0,0.15)';
        };

        // Add click handler
        this.chatIcon.onclick = function() {
          if (_this.isVisible) {
            _this.hide();
          } else {
            _this.show();
          }
        };

        // Create chat wrapper
        var chatWrapper = document.createElement('div');
        chatWrapper.className = 'chat-content';

        // Create chat header for dragging
        var header = document.createElement('div');
        header.className = 'chat-header';
        header.textContent = 'Chat';

        // Create iframe
        this.iframe = document.createElement('iframe');
        this.iframe.src = this.config.url;
        this.iframe.style.width = '100%';
        this.iframe.style.height = 'calc(100% - 30px)';
        this.iframe.style.border = 'none';
        this.iframe.style.marginTop = '30px';
        this.iframe.style.display = 'none';
        this.iframe.style.transition = 'all 0.3s ease';

        // Create resize handles
        var rightHandle = document.createElement('div');
        rightHandle.className = 'resize-handle right';
        var bottomHandle = document.createElement('div');
        bottomHandle.className = 'resize-handle bottom';
        var cornerHandle = document.createElement('div');
        cornerHandle.className = 'resize-handle corner';
        if (this.config.position === 'fixed') {
          this.container.style.position = 'fixed';
          this.container.style.bottom = '90px';
          this.container.style.right = this.config.right;
        }
        this.container.style.width = this.config.width;
        this.container.style.height = this.config.height;
        this.container.className = 'chat-container';

        // Add drag functionality with performance optimization
        this.initDragging(header);

        // Add resize functionality
        this.initResizing(rightHandle, 'right');
        this.initResizing(bottomHandle, 'bottom');
        this.initResizing(cornerHandle, 'corner');

        // Append elements
        chatWrapper.appendChild(header);
        chatWrapper.appendChild(this.iframe);
        this.container.appendChild(chatWrapper);
        this.container.appendChild(rightHandle);
        this.container.appendChild(bottomHandle);
        this.container.appendChild(cornerHandle);
        iconWrapper.appendChild(pulse);
        iconWrapper.appendChild(this.chatIcon);
        document.body.appendChild(iconWrapper);
      },
    },
    {
      key: 'show',
      value: function show() {
        var _this2 = this;
        if (this.iframe) {
          this.iframe.style.display = 'block';
          requestAnimationFrame(function() {
            _this2.isVisible = true;
            _this2.container.classList.add('chat-window-visible');
            _this2.container.style.zIndex = '9998';
            _this2.chatIcon.innerHTML =
              '\n          <svg width="50%" height="50%" viewBox="0 0 24 24" fill="white" style="transition: all 0.3s ease; transform: rotate(180deg);">\n            <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>\n          </svg>\n        ';
          });
        }
      },
    },
    {
      key: 'hide',
      value: function hide() {
        var _this3 = this;
        if (this.iframe) {
          this.isVisible = false;
          this.container.classList.remove('chat-window-visible');
          this.container.style.zIndex = '1';
          this.chatIcon.innerHTML =
            '\n        <svg width="50%" height="50%" viewBox="0 0 24 24" fill="white" style="transition: all 0.3s ease">\n          <path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12z"/>\n        </svg>\n      ';
          setTimeout(function() {
            if (!_this3.isVisible) {
              _this3.iframe.style.display = 'none';
            }
          }, 300);
        }
      },
    },
    {
      key: 'destroy',
      value: function destroy() {
        if (this.iframe && this.container) {
          this.container.removeChild(this.iframe);
          this.iframe = null;
        }
        if (this.chatIcon) {
          var iconWrapper = this.chatIcon.parentElement;
          if (iconWrapper) {
            document.body.removeChild(iconWrapper);
          }
          this.chatIcon = null;
        }
      },
    },
    {
      key: 'initDragging',
      value: function initDragging(header) {
        var _this4 = this;
        var rafId = null;
        var initialX, initialY;
        var onMouseMove = function onMouseMove(e) {
          if (!_this4.isDragging) return;
          if (rafId) {
            cancelAnimationFrame(rafId);
          }
          rafId = requestAnimationFrame(function() {
            var deltaX = e.clientX - initialX;
            var deltaY = e.clientY - initialY;
            var containerRect = _this4.container.getBoundingClientRect();
            var viewportWidth = window.innerWidth;
            var viewportHeight = window.innerHeight;

            // Calculate new position while keeping the container within viewport bounds
            var newX = Math.max(
              0,
              Math.min(
                viewportWidth - containerRect.width,
                containerRect.left + deltaX,
              ),
            );
            var newY = Math.max(
              0,
              Math.min(
                viewportHeight - containerRect.height,
                containerRect.top + deltaY,
              ),
            );
            _this4.container.style.left = newX + 'px';
            _this4.container.style.top = newY + 'px';
            initialX = e.clientX;
            initialY = e.clientY;
          });
        };
        var _onMouseUp = function onMouseUp() {
          _this4.isDragging = false;
          if (rafId) {
            cancelAnimationFrame(rafId);
          }
          document.removeEventListener('mousemove', onMouseMove);
          document.removeEventListener('mouseup', _onMouseUp);
        };
        header.onmousedown = function(e) {
          if (_this4.isResizing) return;
          _this4.isDragging = true;
          initialX = e.clientX;
          initialY = e.clientY;

          // Remove transition during drag
          _this4.container.style.transition = 'none';
          document.addEventListener('mousemove', onMouseMove);
          document.addEventListener('mouseup', _onMouseUp);
        };
      },
    },
    {
      key: 'initResizing',
      value: function initResizing(handle, type) {
        var _this5 = this;
        var rafId = null;
        handle.onmousedown = function(e) {
          e.preventDefault();
          _this5.isResizing = true;
          var startX = e.clientX;
          var startY = e.clientY;
          var startWidth = parseInt(_this5.container.style.width);
          var startHeight = parseInt(_this5.container.style.height);
          var onMouseMove = function onMouseMove(e) {
            if (!_this5.isResizing) return;

            // Cancel any existing animation frame
            if (rafId) {
              cancelAnimationFrame(rafId);
            }

            // Schedule the update
            rafId = requestAnimationFrame(function() {
              if (type === 'right' || type === 'corner') {
                var width = startWidth + (e.clientX - startX);
                if (
                  width >= parseInt(_this5.config.minWidth) &&
                  width <= parseInt(_this5.config.maxWidth)
                ) {
                  _this5.container.style.width = ''.concat(width, 'px');
                }
              }
              if (type === 'bottom' || type === 'corner') {
                var height = startHeight + (e.clientY - startY);
                if (
                  height >= parseInt(_this5.config.minHeight) &&
                  height <= parseInt(_this5.config.maxHeight)
                ) {
                  _this5.container.style.height = ''.concat(height, 'px');
                }
              }
            });
          };
          var _onMouseUp2 = function onMouseUp() {
            _this5.isResizing = false;
            if (rafId) {
              cancelAnimationFrame(rafId);
            }
            document.removeEventListener('mousemove', onMouseMove);
            document.removeEventListener('mouseup', _onMouseUp2);
          };
          document.addEventListener('mousemove', onMouseMove);
          document.addEventListener('mouseup', _onMouseUp2);
        };
      },
    },
  ]);
})();
export { ChatbotSDK };
